import JQuery from 'jquery';
import util from '@/js/util/util.js';

let attribute = {
    setAttribute: function(element) {
        if (element.component === 'Clock02') {
            this.setValue(this.getHPointerWidthName(), element.attribute.chartOption.option.series[0].pointer.width);
            this.setValue(this.getHPointerLengthName(), element.attribute.chartOption.option.series[0].pointer.length);
            this.setValue(this.getMPointerWidthName(), element.attribute.chartOption.option.series[1].pointer.width);
            this.setValue(this.getMPointerLengthName(), element.attribute.chartOption.option.series[1].pointer.length);
            this.setValue(this.getSPointerWidthName(), element.attribute.chartOption.option.series[2].pointer.width);
            this.setValue(this.getSPointerLengthName(), element.attribute.chartOption.option.series[2].pointer.length);
            this.setValue(this.getAnchorSizeName(), element.attribute.chartOption.option.series[2].anchor.size);
            this.setValue(this.getSplitLineWidthName(), element.attribute.chartOption.option.series[0].splitLine.lineStyle.width);
            this.setValue(this.getSplitLineDistanceName(), element.attribute.chartOption.option.series[0].splitLine.distance);
            this.setValue(this.getAxisLineWidthName(), element.attribute.chartOption.option.series[0].axisLine.lineStyle.width);
            this.setValue(this.getAxisLabelSizeName(), element.attribute.chartOption.option.series[0].axisLabel.fontSize);
            this.setValue(this.getAxisLabelDistanceName(), element.attribute.chartOption.option.series[0].axisLabel.distance);
        }
    },
    setValue: function(id, value) {
        let obj = JQuery('#' + id);
        obj.val(value);
    },
    getHPointerWidthName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_0_POINTER_WIDTH';
    },
    getHPointerLengthName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_0_POINTER_LENGTH';
    },
    getMPointerWidthName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_1_POINTER_WIDTH';
    },
    getMPointerLengthName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_1_POINTER_LENGTH';
    },
    getSPointerWidthName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_2_POINTER_WIDTH';
    },
    getSPointerLengthName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_2_POINTER_LENGTH';
    },
    getAnchorSizeName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_2_ANCHOR_SIZE';
    },
    getSplitLineWidthName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_0_SPLITLINE_LINESTYLE_WIDTH';
    },
    getSplitLineDistanceName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_0_SPLITLINE_DISTANCE';
    },
    getAxisLineWidthName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_0_AXISLINE_LINESTYLE_WIDTH';
    },
    getAxisLabelSizeName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_0_AXISLABEL_FONTSIZE';
    },
    getAxisLabelDistanceName: function() {
        return window.getRootName() + 'ATTRIBUTE_CHARTOPTION_SERIES_0_AXISLABEL_DISTANCE';
    },
    setHPointerLength: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[0].pointer.length = value;
        updateInput && this.setValue(this.getHPointerWidthName(), value);
    },
    setHPointerWidth: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[0].pointer.width = value;
        updateInput && this.setValue(this.getHPointerLengthName(), value);
    },
    setHPointerColor: function(element, value) {
        element.attribute.chartOption.option.series[0].pointer.itemStyle.color = util.isNotBlank(value) ? util.rgbaToHexColor(value) : '#ffffffff';
    },
    setMPointerLength: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[1].pointer.length = value;
        updateInput && this.setValue(this.getMPointerLengthName(), value);
    },
    setMPointerWidth: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[1].pointer.width = value;
        updateInput && this.setValue(this.getMPointerLengthName(), value);
    },
    setMPointerColor: function(element, value) {
        element.attribute.chartOption.option.series[1].pointer.itemStyle.color = util.isNotBlank(value) ? util.rgbaToHexColor(value) : '#ffffffff';
    },
    setSPointerLength: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[2].pointer.length = value;
        updateInput && this.setValue(this.getSPointerLengthName(), value);
    },
    setSPointerWidth: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[2].pointer.width = value;
        updateInput && this.setValue(this.getSPointerLengthName(), value);
    },
    setSPointerColor: function(element, value) {
        element.attribute.chartOption.option.series[2].pointer.itemStyle.color = util.isNotBlank(value) ? util.rgbaToHexColor(value) : '#ffffffff';
    },
    setAnchorSize: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[2].anchor.size = value;
        updateInput && this.setValue(this.getMPointerLengthName(), value);
    },
    setAnchorColor: function(element, value) {
        element.attribute.chartOption.option.series[2].anchor.itemStyle.color = util.isNotBlank(value) ? util.rgbaToHexColor(value) : '#ffffffff';
    },
    setSplitLineWidth: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[0].splitLine.lineStyle.width = value;
        updateInput && this.setValue(this.getSplitLineWidthName(), value);
    },
    setSplitLineDistance: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[0].splitLine.distance = value;
        updateInput && this.setValue(this.getSplitLineDistanceName(), value);
    },
    setSplitLineColor: function(element, value) {
        element.attribute.chartOption.option.series[0].splitLine.lineStyle.color = util.isNotBlank(value) ? util.rgbaToHexColor(value) : '#ffffffff';
    },
    setAxisLineWidth: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[0].axisLine.lineStyle.width = +value;
        updateInput && this.setValue(this.getAxisLineWidthName(), value);
    },
    setAxisLineColor: function(element, value) {
        element.attribute.chartOption.option.series[0].axisLine.lineStyle.color = util.isNotBlank(value) ? [[1, util.rgbaToHexColor(value)]] : [[1, '#ffffffff']];
    },
    setAxisLabelSize: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[0].axisLabel.fontSize = value;
        updateInput && this.setValue(this.getAxisLabelSizeName(), value);
    },
    setAxisLabelDistance: function(element, value, updateInput = true) {
        element.attribute.chartOption.option.series[0].axisLabel.distance = value;
        updateInput && this.setValue(this.getAxisLabelDistanceName(), value);
    },
    setAxisLabelColor: function(element, value) {
        element.attribute.chartOption.option.series[0].axisLabel.color = util.isNotBlank(value) ? util.rgbaToHexColor(value) : '#ffffffff';
    },
};

export default attribute;